<template>
  <div id="app">
    <div id="up">
      <el-upload
              ref="upload"
              class="upload-demo"
              drag
              action="http://123.56.239.121:8989:8989/api/all/upload"
              :before-upload="beforeAvatarUpload"
              :on-success="success"
              :on-error="showError"
              :limit="1"
              :data="token"
              multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div  style="font-size: 16px"  slot="tip">选xls或者xlsx</div>
      </el-upload>
    </div>
    <br>
    <el-link type="primary" style="font-size: 26px"  class='download'  :disabled="stateNeed"  @click="click">合同下载</el-link>

  </div>
</template>

<script>


export default {
  data(){
    return {
      stateNeed:true,
      token:{
        token:""
      }
    }
  },
  name: 'App',
  components: {
  },

  methods: {
    // 上传前对文件的大小的判断
    beforeAvatarUpload (file) {
      //123.56.239.121:8989
      this.token.token = (Math.ceil(Math.random()*(999999-100000)+100000)).toString()
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      if (!extension && !extension2 ) {
        this.$message({
          message: '上传模板只能是 xls、xlsx格式哦',
          type: 'warning'
        });
      }
      return extension || extension2
    },

    click(){
        this.stateNeed = true;
        let a = document.createElement('a')
        a.href = 'http://123.56.239.121:8989:8989/api/down?token='+this.token.token // 这里的请求方式为get
        a.click()
    },

    success (res) {
      if (res === "ok"){
        this.$message('上传成功了，下载合同吧');
        this.stateNeed = false;
      }else{
        this.$message.error('文件处理失败了，再试一下吧');
      }
      this.$refs.upload.clearFiles();
    },

    showError(){
      this.$message('文件上传失败了，再试一下吧');
      this.stateNeed = true;
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 160px;
}

</style>
